<!-- 
 @Author: Havery 
 @Date: 2021-05-25 17:17:08   
 @function: 基础设置
 -->
<template>
  <div style="height: 100%">
    <el-form label-width="120px" ref="modifyInfo" :rules="formInfoRules" :model="formInfo">
      <el-row :gutter="12" style="margin-top:10px;">
        <el-col :span="24">
          <el-card shadow="always">
            <div>
              <el-col :span="8">
                <el-form-item label="网站Log：" prop="log_pic">
                  <el-row>
                    <img :src="formData.log_pic" class="bgimg" alt />
                  </el-row>
                  <el-row>
                    注：标题图片规格170px*32px
                  </el-row>
                  <el-row>
                    <el-button
                      size="mini"
                      type="primary"
                      style="width:110px"
                      :loading="loading"
                      @click="uploadLog()"
                    >上传头像</el-button>
                  </el-row>
                </el-form-item>
                <el-form-item label="网站标题：">
                  <el-input   v-model="formInfo.website_title" autocomplete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="电话号码：">
                  <el-input   v-model="formInfo.telephone" autocomplete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址：">
                  <el-input   v-model="formInfo.email" autocomplete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="传真地址：">
                  <el-input   v-model="formInfo.fax" autocomplete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="公司地址：">
                  <el-input   v-model="formInfo.address" autocomplete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="备案编号：">
                  <el-input   v-model="formInfo.record_number" autocomplete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="授权信息：">
                  <el-input   v-model="formInfo.copyright_info" autocomplete="off" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="二维码：">
                  <el-row>
                    <img :src="formData.qr_code" class="qrcodeimg" alt />
                  </el-row>
                  <el-row>
                    注：标题图片规格90x*90px
                  </el-row>
                  <el-row>
                    <el-button
                      size="mini"
                      type="primary"
                      style="width:110px"
                      :loading="loading"
                      @click="uploadQrCode()"
                    >上传二维码</el-button>
                  </el-row>
                </el-form-item>
              </el-col>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
        :title="editForm.formTitle"
        :visible.sync="editForm.formVisible"
        v-if="editForm.formVisible"
        :width="editForm.width"
        v-dialogDrag
        custom-class="dialog"
        :close-on-click-modal="false"
      >
      <ImageCropperForm  v-bind:imageUploadInfo="mediaInfo" @callBack="callBack"></ImageCropperForm>
    </el-dialog>
  </div>
</template>

<script>
import ImageCropperForm from "@/components/common/imageCropper"; //图片上传
//引用对象
export default {
  components: {
      ImageCropperForm
  },
  data() {
    return {
      loading: false, //是显示加载
      formInfo: {}, //官网基础设置信息
      formData: {
        log_pic:"",//log
        qr_code:"",//二维码
      },
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: ""
      },
      mediaInfo: {
        servicePath:this.$store.getters.filesPath.service.official_service,
        uploadFolder:this.$store.getters.filesPath.folder.basic_settings_attach, 
        originalPic:"",
        width: 170,
        height: 32,
        backData:""
      },
      formInfoRules: {
        // log_pic: [
        //   { required: true, message: "请输入回发票金额", trigger: "blur" }
        // ],
      }
    };
  },
  computed: {},
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {},
  //事件方法执行
  //监听方法 click事件等，执行drawFeatures方法
  methods: {
    //上传Log
    uploadLog() {
      this.editForm.formVisible = true;
      this.editForm.formTitle = "上传Log信息";
      this.editForm.width = "35%";
      this.mediaInfo.width="170";
      this.mediaInfo.height="32";
      this.mediaInfo.backData="log";
    },
    uploadQrCode() {
      this.editForm.formVisible = true;
      this.editForm.formTitle = "上传二维码信息";
      this.editForm.width = "35%";
       this.mediaInfo.width="90";
      this.mediaInfo.height="90";
      this.mediaInfo.backData="QrCode";
    },
    //上传返回信息
    callBack(info) {
      this.editForm.formVisible = false;
      if (info) {
        if (info.imageUploadInfo.backData=="log") {
           this.formData.log_pic=this.$store.getters.fileServerURI+info.data.path;
           this.formInfo.log_pic=info.data.path;
        } else {
           this.formData.qr_code=this.$store.getters.fileServerURI+info.data.path;
           this.formInfo.qr_code=info.data.path;
        }
      }  
    },
  }
};
</script>

<style lang="scss" scoped>
.bgimg {
  height: 32px;
  width: 170px;
}
.qrcodeimg {
  height: 90px;
  width: 90px;
}
</style>

<style>
.official_basic .el-card {
  border: none;
}
.official_basic .el-card__header {
  padding-top: 10px;
  padding-bottom: 10px;
}
.official_basic .el-card__body {
  padding: 10px;
}
</style>
